<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传</title>
<style type="text/css">
#main {
	width: 1000px;
	height: 800px;
	margin: 0px auto;
}

#main h1 {
	text-align: center;
}

#main table {
	width: 100%;
	border-collapse: collapse;
}

#main table td {
	border: 1px solid #cc0;
}

#main table td {
	text-align: center;
}
</style>
</head>

<body>
	<div id="main">
		<h1>Ajax文件上传</h1>
		<span id='s1'></span>
		<form id="frm1" method='post' enctype="multipart/form-data">
			商品名称:<input type='text' name='pname'><br> 商品图片:<input
				type='file' name='pic'></br> 
				<input type="button" value="提交">
		</form>

	</div>

	<script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		/*为按钮提供单击事件*/
		$("#frm1 input[type='button']").click(function() {
			var formData = new FormData($("#frm1")[0]);
			console.log(formData);
			//采用jQuery的ajax发送请求
			$.ajax({
				url : "add.up",
				type : "POST",
				data : formData,
				processData : false, // 不处理数据,无须进行编码
				contentType : false, // 不设置内容类型,使用form中的enctype
				success : function(data) {
					//调用重置的方法
					$("#frm1")[0].reset();//等价于重置按钮的功能
					$("#s1").html(data);
				}
			});
		});
	</script>
</body>

</html>